import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

/**
 * 环境贴图
 *    通过6张贴图，建立三维模型周边环境
 * 这6张贴图分别表示模型的上下、左右、前后六面。
 * 使用 CubeTextureLoader 来加载环境贴图，通过材质对象的 .envMap 属性设置环境贴图
 */
const geo = new THREE.BoxGeometry(200, 200, 200);
const ctl = new THREE.CubeTextureLoader();
// 设置环境贴图公共路径
ctl.setPath('../../textures/park3Med/');
// 返回环境贴图纹理对象
const cubeTxr = ctl.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
// 构建材质对象
const mat = new THREE.MeshPhongMaterial({
  // 若材质设置颜色，模型最终颜色会和贴图进行融合计算
  color: '0xff0000',
  envMap: cubeTxr, // 设置环境贴图
  reflectivity: .1 // 环境贴图反射率，控制环境贴图对三维模型的影响程度
});
console.log(cubeTxr.image);
const mesh = new THREE.Mesh(geo, mat);
scene.add(mesh);

const al = new THREE.AmbientLight(0xffffff);
scene.add(al);
const k = innerWidth / innerHeight,
      s = 400,
      camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
camera.position.set(0, 0, 400);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xaaaaaa);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);
(function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
})();